<template>
  <div :id="autoid" :style="style"></div>
  <!-- v-resize="resize" -->  
</template>
<script>

// 使用echarts
import * as echarts from "echarts";
// echarts.registerTheme('default',customed)
// import {myMixin} from "../assets/mixins/mixin";
let myChart = null;
const idGen = () => {
  return new Date().getTime();
};
export default {
  // mixins:[myMixin],

  data() {
    return {
      autoid: null,
      // myChart: null,
    };
  },
  watch:{
    width(){
      // console.log('有没有检测到宽度发生变化呢？');
      // this.myChart.resize()
      myChart.resize({animation:{ duration: 300 }})
      
    },
    options(){
      // this.myChart.setOption(this.options)
      myChart.setOption(this.options)
    },
    theme(){/* 
        this.myChart.dispose();
        this.myChart = echarts.init(document.getElementById(this.autoid),this.theme)
        this.myChart.setOption(this.options);   */
        myChart.dispose();
        myChart = echarts.init(document.getElementById(this.autoid),this.theme)
        myChart.setOption(this.options);  
    },
  },
  props: {
    height: {
      type: String,
      default: '400px',
    },
    width: {
      type: String,
      default: '600px',
    },
    options: {
      type: Object,
      default: null,
    },
    theme: {
      type: Object,
      default: () => {
        return theme;
      },
    },

  },

  computed: {
    style() {
      return {
        height: this.height,
        width: this.width,
      };
    },
  },
  created() {
    this.autoid = idGen();
  },
  mounted() {
    // 当屏幕改变，图表重新动态改变并渲染
    // var that = this;
    // window.onresize = function () {
    //   myChart.resize();
    // };
    //#region 
      /* 
          下载或复制以下的主题保存至 *.json 文件；
          读取该 JSON 文件，并使用 obj = JSON.parse(data) 将其转换成对象；
          调用 echarts.registerTheme('customed', obj) 注册主题；
          使用 echarts.init(dom, 'customed') 创建图表，第二个参数即为刚才注册的主题名字。
s

          // 假设主题名称是 "vintage"
            $.getJSON('xxx/xxx/vintage.json', function(themeJSON) {
            echarts.registerTheme('vintage', JSON.parse(themeJSON));
            var chart = echarts.init(dom, 'vintage');
          });     
      */
   /*  $.getJSON('../subject/customed.json',function(themeJSON){
      echarts.registerTheme('customed',JSON.parse(themeJSON));
      this.myChart = echarts.init(document.getElementById(this.autoid),'customed');
    }) */
    //#endregion
    // this.myChart = echarts.init(document.getElementById(this.autoid),this.theme);
    myChart = echarts.init(document.getElementById(this.autoid),this.theme);
    // console.log('打印出传递过来的this.theme ',);    

    // 使用刚指定的配置项和数据显示图表。
    // this.myChart.setOption(this.options);
    myChart.setOption(this.options);
  },
};
</script>